<template>
  <div class="product-list">
    <el-empty 
      v-if="products.length === 0 && !loading" 
      description="没有找到商品" 
    />
    
    <div v-else class="product-grid">
      <div 
        v-for="product in products" 
        :key="product.id" 
        class="product-card"
        @click="() => $emit('add-to-cart', product)"
      >
        <div class="product-image">
          <el-image 
            :src="getImageUrl(product.image)" 
            fit="cover"
            :lazy="true"
            :preview-src-list="[]"
          >
            <template #error>
              <div class="image-placeholder">
                <i class="fa fa-image"></i>
              </div>
            </template>
          </el-image>
          
          <div class="inventory-badge" :class="getInventoryClass(product.inventory)">
            {{ getInventoryText(product.inventory) }}
          </div>
        </div>
        
        <div class="product-info">
          <div class="product-name" :title="product.name">{{ product.name }}</div>
          <div class="product-code">{{ product.code }}</div>
          <div class="product-price">
            <span class="price-symbol">¥</span>
            <span class="price-value">{{ formatPrice(product.price) }}</span>
          </div>
        </div>
        
        <div class="add-btn">
          <el-button 
            type="primary" 
            circle 
            size="small"
            :disabled="product.inventory <= 0"
          >
            <i class="fa fa-plus"></i>
          </el-button>
        </div>
      </div>
    </div>
    
    <div v-if="loading" class="loading-container">
      <el-skeleton :rows="3" animated />
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue'

interface Product {
  id: number;
  name: string;
  code: string;
  price: number;
  image: string;
  inventory: number;
  categoryId: number;
}

export default defineComponent({
  name: 'ProductList',
  props: {
    products: {
      type: Array as PropType<Product[]>,
      required: true
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  emits: ['add-to-cart'],
  setup() {
    // 获取商品图片URL
    const getImageUrl = (image: string) => {
      // 实际应用中，这里可能需要拼接完整的图片URL
      // 例如: return `/api/uploads/${image}`
      return image.startsWith('http') ? image : `https://picsum.photos/id/${Math.floor(Math.random() * 100)}/300/300`
    }
    
    // 格式化价格
    const formatPrice = (price: number) => {
      return price.toFixed(2)
    }
    
    // 获取库存状态样式
    const getInventoryClass = (inventory: number) => {
      if (inventory <= 0) return 'no-stock'
      if (inventory < 5) return 'low-stock'
      if (inventory < 20) return 'medium-stock'
      return 'high-stock'
    }
    
    // 获取库存状态文本
    const getInventoryText = (inventory: number) => {
      if (inventory <= 0) return '无库存'
      if (inventory < 5) return '库存紧张'
      return `库存${inventory}`
    }
    
    return {
      getImageUrl,
      formatPrice,
      getInventoryClass,
      getInventoryText
    }
  }
})
</script>

<style scoped lang="scss">
.product-list {
  flex: 1;
  padding: 8px;
  overflow-y: auto;
  background-color: #f5f7fa;
  height: calc(90vh - 120px); /* 计算高度 = 90vh(容器高度) - 60px(顶部导航) - 60px(商品分类) */
  max-height: calc(90vh - 120px);
  
  .product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
    gap: 10px;
    
    .product-card {
      position: relative;
      background-color: #fff;
      border-radius: 4px;
      overflow: hidden;
      box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.05);
      transition: all 0.3s;
      cursor: pointer;
      height: 100%;
      display: flex;
      flex-direction: column;
      
      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        
        .add-btn {
          opacity: 1;
        }
      }
      
      .product-image {
        position: relative;
        height: 120px;
        
        .el-image {
          width: 100%;
          height: 100%;
        }
        
        .image-placeholder {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 100%;
          height: 100%;
          background-color: #f0f0f0;
          
          i {
            font-size: 30px;
            color: #ccc;
          }
        }
        
        .inventory-badge {
          position: absolute;
          top: 3px;
          right: 3px;
          font-size: 10px;
          padding: 1px 5px;
          border-radius: 8px;
          
          &.high-stock {
            background-color: rgba(103, 194, 58, 0.8);
            color: white;
          }
          
          &.medium-stock {
            background-color: rgba(230, 162, 60, 0.8);
            color: white;
          }
          
          &.low-stock {
            background-color: rgba(245, 108, 108, 0.8);
            color: white;
          }
          
          &.no-stock {
            background-color: rgba(144, 147, 153, 0.8);
            color: white;
          }
        }
      }
      
      .product-info {
        padding: 8px;
        flex: 1;
        display: flex;
        flex-direction: column;
        
        .product-name {
          font-size: 13px;
          font-weight: 500;
          margin-bottom: 4px;
          color: #303133;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          line-height: 1.3;
          height: 2.6em;
        }
        
        .product-code {
          font-size: 11px;
          color: #909399;
          margin-bottom: 4px;
        }
        
        .product-price {
          margin-top: auto;
          color: #f56c6c;
          font-weight: 500;
          
          .price-symbol {
            font-size: 11px;
            margin-right: 1px;
          }
          
          .price-value {
            font-size: 15px;
          }
        }
      }
      
      .add-btn {
        position: absolute;
        bottom: 8px;
        right: 8px;
        opacity: 0.7;
        transition: opacity 0.3s;
        
        .el-button {
          padding: 5px;
        }
      }
    }
  }
  
  .loading-container {
    padding: 15px;
  }
}
</style> 